import React, { useEffect, useState } from "react";
import {
  Button,
  Card,
  NavBar,
  List,
  Modal,
  Form,
  Input,
  Toast,
  Radio,
  Checkbox,
  Dialog,
} from "antd-mobile";
import { AntOutline, DeleteOutline, EditSOutline } from "antd-mobile-icons";
import { useNavigate } from "react-router-dom";
import { addPer, delPer, stateChange, editPer } from "../../store/TickPerson";
import { useDispatch, useSelector } from "react-redux";
import http from "../../api/http";
function Index() {
  const navigate = useNavigate();
  const { tickPersonList } = useSelector((state) => state.TickPerson);
  const dispatch = useDispatch();
  const [visible, setVisible] = useState(false);
  const [form] = Form.useForm();
  const [disper, setDisper] = useState(false);
  const onFinish = () => {
    //把数据打印到页面上
    if (disper) {
      const addobj = { ...form.getFieldsValue(), id: Date.now(), state: false };
      dispatch(addPer(addobj));
    } else {
      const editobj = form.getFieldsValue(true);
      dispatch(editPer(editobj));
    }
       
    setVisible(false);
  };
  //新增乘车人
  const addpersom = () => {
    setVisible(true);
    setDisper(true);
    form.resetFields("");
  };
  //编辑乘车人
  const editper = (item) => {
    setVisible(true);
    setDisper(false);
    form.setFieldsValue(item);
  };
  //删除乘车人
  const delden = async (item) => {
    const res = await Dialog.confirm({
      content: "你确定要删除乘车人吗",
    });
    if (res) {
      dispatch(delPer(item));
    } else {
      console.log("取消删除");
    }
  };
  //上传照片
  const handelUpFileId = () => {
    const inputEl = document.createElement("input");
    inputEl.type = "file";
    inputEl.click();

    inputEl.onchange = async () => {
      const file = inputEl.files[0];

      const fileData = new FormData();
      fileData.append("file", file);

      const res = await http.post("/api/orc/upload/image", fileData);
      const { code, data, message } = res.data;
      if (code === 200) {
        Toast.show({
          content: message,
          icon: "success",
        });

        form.setFieldsValue(data);
      } else {
        Toast.show({
          content: message,
          icon: "fail",
        });
      }
    };
  };

  return (
    <div>
      <NavBar onBack={() => navigate(-1)}>乘车人页面</NavBar>
      <Button onClick={() => addpersom()}>添加乘车人</Button>

      <List header="乘车人列表">
        {tickPersonList?.map((item, ind) => (
          <List.Item
            key={ind}
            description={item.code}
            prefix={<EditSOutline onClick={() => editper(item)} />}
            extra={
              <div>
                <DeleteOutline fontSize={16} onClick={() => delden(item)} />
                <Checkbox
                  onChange={() => {
                    dispatch(stateChange(item));
                  }}
                />
              </div>
            }
          >
            {item.name}
          </List.Item>
        ))}
      </List>
      <Modal
        visible={visible}
        content={
          <Form
            form={form}
            layout="horizontal"
            onFinish={onFinish}
            footer={
              <Button block type="submit" color="primary" size="large">
                提交
              </Button>
            }
          >
            <Form.Header>{disper ? "添加" : "编辑"}</Form.Header>
            {disper && (
              <Button block onClick={() => handelUpFileId()}>
                上传识别
              </Button>
            )}

            <Form.Item
              name="name"
              label="姓名"
              rules={[{ required: true, message: "姓名不能为空" }]}
            >
              <Input onChange={console.log} placeholder="请输入姓名" />
            </Form.Item>
            <Form.Item
              name="code"
              label="身份证"
              rules={[{ required: true, message: "身份证不能为空" }]}
            >
              <Input onChange={console.log} placeholder="请输入身份证" />
            </Form.Item>
          </Form>
        }
        closeOnAction
        onClose={() => {
          setVisible(false);
        }}
      />
    </div>
  );
}

export default Index;
